<template>
  <el-form ref="ruleForm2Ref" :model="ruleForm2" :rules="rules" label-width="15%" class="demo-ruleForm2"
    :size="formSize" status-icon>
    <el-form-item label="昵称" prop="username">
      <el-input v-model="ruleForm2.username" placeholder="3-16个字符" />
    </el-form-item>
    <el-form-item label="账号" prop="phone">
      <el-input v-model="ruleForm2.phone" placeholder="手机号码" />
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="ruleForm2.password" type="password" autocomplete="off" placeholder="长度在6-16位,建议使用至少两种字符"
        show-password />
    </el-form-item>
    <el-form-item label="邀请码" prop="invite_code">
      <el-input v-model="ruleForm2.invite_code" placeholder="请输入邀请码" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleForm2Ref)">确认注册</el-button>
      <el-button @click="resetForm(ruleForm2Ref)">重置信息</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { post } from "@/tools/api/api"
import { ElMessage } from 'element-plus'
import { debounce } from "@/hooks/tools";
import { useRouter } from "vue-router";
import { usePhotoStore } from "@/store/photo";
const photoStore = usePhotoStore();
const router = useRouter()

const formSize = ref("default");
const ruleForm2Ref = ref<FormInstance>();
const ruleForm2 = reactive({
  username: "",
  phone: "",
  password: "",
  invite_code: '',
  avatar: ''
});

// 提交form信息
const submitForm = debounce(async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      post("userRegister", ruleForm2).then((res: any) => {
        if (res.code === 100) {
          ElMessage.success("注册成功");
          localStorage.setItem('token', res.token)
          router.push('/home',)
          photoStore.$patch((state) => {
            state.isLogin = true;
          })
        } else ElMessage.error(res.msg)
      })
    } else {

    }
  });
});


// 校验规则
const rules = reactive<FormRules>({
  username: [
    { required: true, message: "昵称不能为空", trigger: "blur" },
    { min: 3, max: 16, message: "长度应该在3-16个字符", trigger: "blur" },
  ],
  phone: [
    { required: true, message: "账号不能为空", trigger: "blur" },
    { pattern: /^1[3-9]\d{9}$/, message: "手机号不存在", trigger: "blur" },
  ],
  password: [
    { required: true, message: "密码不能为空", trigger: "blur" },
    { min: 6, max: 16, message: "长度应该在6-16个字符", trigger: "blur" },
  ],
  invite_code: [
    { required: true, message: "邀请码不能为空", trigger: "blur" },
  ]
});


// 重置form信息
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style lang="scss" scoped>
form {
  padding: 0.2rem;
  border-radius: 0.1rem;
  background-color: rgb(246, 246, 246);

  .tips {
    color: green;
    float: right;
    font-size: 0.05rem;
  }
}
</style>
